<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<style>
	body {
		font-size: 16px;
	}
	.select-xs.select2-selection--single {
		background-color: transparent;
	}
	span.select2-dropdown.select2-dropdown--below {
		background-color: transparent;
	}
	* {
		color: white !important;
		background-color: transparent !important;
	}
	h6.panel-title, .h6.panel-title {
		font-size: 20px;
	}
	.myyd:hover {
		background: #2196F3;
	}
	.panel {
		background-color: rgba(88, 88, 88, 0.1) !important;
	}
	.panel-flat > .panel-heading {
		background-color: transparent;
	}
	.bg {
	  animation:slide 3s ease-in-out infinite alternate;
	  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
	  bottom:0;
	  left:-50%;
	  opacity:.5;
	  position:fixed;
	  right:-50%;
	  top:0;
	  z-index:-1;
	}
	
	.dropdown-menu {
		background-color:rgba(0,0,0,0.2) !important;
	}
	
	.select2-results {
		background-color:rgba(0,0,0,0.2) !important;
	}

	.bg2 {
	  animation-direction:alternate-reverse;
	  animation-duration:4s;
	}
	
	.bg3 {
	  animation-duration:5s;
	}
	
	.content {
	  background-color:rgba(255,255,255,.8);
	  border-radius:.25em;
	  box-shadow:0 0 .25em rgba(0,0,0,.25);
	  box-sizing:border-box;
	  left:50%;
	  padding:10vmin;
	  position:fixed;
	  text-align:center;
	  top:50%;
	  transform:translate(-50%, -50%);
	}
	
	h1 {
	  font-family:monospace;
	}
	
	@keyframes slide {
	  0% {
	    transform:translateX(-25%);
	  }
	  100% {
	    transform:translateX(25%);
	  }
	}
</style>
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<table id="coolTable" class="cntable table table-bordered dataTable table-employee">
	<thead>
		<tr>
			<th style="width: 130px">文献名</th>
			<th style="width: 130px">出版社</th>
			<th style="width: 130px">作者</th>
			<th style="width: 130px">页码</th>
			<th style="width: 130px">刊号</th>
			<th style="width: 130px">阅读人</th>
			<th style="width: 130px">阅读日期</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="readDocument" items="${readDocuments}" varStatus="status">
			<tr class="myyd" data-id="${readDocument.id}">
				<td>${readDocument.documentName}</td>
				<td>${readDocument.press}</td>
				<td>${readDocument.author}</td>
				<td>${readDocument.pageNumber}</td>
				<td>${readDocument.serialNumber}</td>
				<td>${readDocument.employeeName}</td>
				<td><fmt:parseDate value="${readDocument.readDate}" pattern="yyyy-MM-dd" var="receiveDate" /> <fmt:formatDate value="${receiveDate}" pattern="yyyy-MM-dd" /></td>
			</tr>
		</c:forEach>
	</tbody>
	<tfoot>
		<tr>
			<th class="pager-th"><%@ include file="/WEB-INF/views/shared/master/pager.jsp"%></th>
		</tr>
	</tfoot>
</table>